<template>
    <el-collapse v-model="activeNames">
        <!-- 采购配置 -->
        <el-collapse-item name="purchase">
            <!-- 折叠面板标题 -->
            <template #title>
                <div class="flex items-center text-2xl">
                    显示配置
                    <el-icon class="el-icon--right">
                        <Eye20Regular />
                    </el-icon>
                </div>
            </template>

            <!-- 折叠面板内容 -->
            <div>
                <!-- 第一个副标题说明 -->
                <div class="flex items-center text-xl mt-4 mb-4">
                    <!-- 点 指示图标 -->
                    <el-icon>
                        <Point />
                    </el-icon>
                    显示主页
                    <el-tooltip effect="dark" content="是否显示主页导航" placement="right-start">
                        <el-icon class="el-icon--right el-icon--left">
                            <BookQuestionMark20Regular />
                        </el-icon>
                    </el-tooltip>
                    <el-switch v-model="useSystem.config.isShowHome" active-text="显示" inactive-text="隐藏" />
                </div>
                <!-- 第二个副标题说明 -->
                <div class="flex items-center text-xl mt-4 mb-4">
                    <!-- 点 指示图标 -->
                    <el-icon>
                        <Point />
                    </el-icon>
                    显示工具
                    <el-tooltip effect="dark" content="是否显示工具导航" placement="right-start">
                        <el-icon class="el-icon--right el-icon--left">
                            <BookQuestionMark20Regular />
                        </el-icon>
                    </el-tooltip>
                    <el-switch v-model="useSystem.config.isShowTools" active-text="显示" inactive-text="隐藏" @change="toggleToolsRouterEvent" />
                </div>
            </div>
        </el-collapse-item>

        <!-- 采购配置 -->
        <el-collapse-item name="purchase">
            <!-- 折叠面板标题 -->
            <template #title>
                <div class="flex items-center text-2xl">
                    采购配置
                    <el-icon class="el-icon--right">
                        <ProtocolHandler24Regular />
                    </el-icon>
                </div>
            </template>

            <!-- 折叠面板内容 -->
            <div>
                <!-- 第一个副标题说明 -->
                <div class="flex items-center text-xl mt-4 mb-4">
                    <!-- 点 指示图标 -->
                    <el-icon>
                        <Point />
                    </el-icon>
                    收货地址配置
                    <el-tooltip effect="dark" content="供应商发货配送地址" placement="right-start">
                        <el-icon class="el-icon--right el-icon--left">
                            <BookQuestionMark20Regular />
                        </el-icon>
                    </el-tooltip>
                    <el-button type="primary" @click="useSystem.getSystemConfigEvent()" plain :icon="WorldDownload">同步服务器</el-button>
                </div>
                <!-- 第一个配置项 -->
                <div class="flex flex-wrap items-center gap-2 mb-8">
                    <!-- 第一项配置 -->
                    <div class="flex flex-wrap items-center gap-2">
                        <!-- 点 指示图标 -->
                        <el-icon class="el-icon--left">
                            <ConditionPoint />
                        </el-icon>
                        <!-- 新增地址名称 -->
                        <div class="flex items-center mr-4 w-full">
                            <div style="width: 120px">地址配置：</div>
                            <el-input style="width: 300px; margin-right: 20px" v-model="deliveryAddress" placeholder="请输入地址" clearable />
                            <el-button type="primary" @click="updateSystemPurchaseConfigEvent" :icon="SaveArrowRight20Regular">保存</el-button>
                        </div>
                        <!-- 已有地址名称 -->
                        <div class="flex items-center mr-4 w-full">
                            <div style="width: 120px">已有地址项：</div>
                            <el-dropdown placement="bottom-start">
                                <el-button :icon="HandFinger"> 地址 * {{ useSystem.purchase.deliveryAddress.length }} </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item v-if="useSystem.purchase.deliveryAddress.length === 0">
                                            没有数据，请先添加或重新拉取数据
                                        </el-dropdown-item>
                                        <el-dropdown-item
                                            v-if="useSystem.purchase.deliveryAddress.length !== 0"
                                            v-for="(item, index) in useSystem.purchase.deliveryAddress"
                                            :key="index"
                                        >
                                            <div class="flex items-center">
                                                <el-text type="primary" tag="b">{{ index + 1 + '. ' + item }}</el-text>
                                                <el-button class="ml-2" type="danger" @click="deleteSystemPurchaseConfigEvent(index)">删除</el-button>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </div>
        </el-collapse-item>

        <!-- 打印配置 -->
        <el-collapse-item name="print">
            <!-- 折叠面板标题 -->
            <template #title>
                <div class="flex items-center text-2xl">
                    打印设置
                    <el-icon class="el-icon--right">
                        <Print20Regular />
                    </el-icon>
                </div>
            </template>

            <!-- 折叠面板内容 -->
            <div>
                <!-- 第一个副标题说明 -->
                <div class="flex items-center text-xl mt-4 mb-4">
                    <!-- 点 指示图标 -->
                    <el-icon>
                        <Point />
                    </el-icon>
                    打印配置
                    <el-tooltip effect="dark" content="本系统打印的配置" placement="right-start">
                        <el-icon class="el-icon--right el-icon--left">
                            <BookQuestionMark20Regular />
                        </el-icon>
                    </el-tooltip>
                    <el-button type="primary" @click="useSystem.getSystemConfigEvent()" plain :icon="WorldDownload">同步服务器</el-button>
                </div>
                <!-- 第一个配置项 -->
                <div class="flex flex-wrap items-center gap-2 mb-8">
                    <!-- 第一项配置 -->
                    <div class="flex flex-wrap items-center gap-2">
                        <!-- 点 指示图标 -->
                        <el-icon class="el-icon--left">
                            <ConditionPoint />
                        </el-icon>
                        <!-- 新增公司名称 -->
                        <div class="flex items-center mr-4 w-full">
                            <div style="width: 120px">公司配置：</div>
                            <el-input
                                class="input-style"
                                v-model="OWNCompanyName"
                                :placeholder="useSystem.print.OWNprint.companyName || '请输入公司名称'"
                                clearable
                            />
                            <el-input
                                class="input-style"
                                v-model="OWNCompanyAddress"
                                :placeholder="useSystem.print.OWNprint.companyAddress || '请输入公司地址'"
                                clearable
                            />
                            <el-input
                                class="input-style"
                                v-model="OWNContacts"
                                :placeholder="useSystem.print.OWNprint.contacts || '请输入联系人'"
                                clearable
                            />
                            <el-input
                                class="input-style"
                                v-model="OWNCompanyTel"
                                :placeholder="useSystem.print.OWNprint.companyTel || '请输入联系方式'"
                                clearable
                            />
                            <el-button type="primary" @click="updateSystemOWNPrintConfigEvent" :icon="SaveArrowRight20Regular">保存</el-button>
                        </div>
                    </div>
                </div>

                <!-- 第二个副标题说明 -->
                <div class="flex items-center text-xl mt-4 mb-4">
                    <!-- 点 指示图标 -->
                    <el-icon>
                        <Point />
                    </el-icon>
                    代加工打印配置
                    <el-tooltip effect="dark" content="打印第三方送货单的配置" placement="right-start">
                        <el-icon class="el-icon--right el-icon--left">
                            <BookQuestionMark20Regular />
                        </el-icon>
                    </el-tooltip>
                    <el-button type="primary" @click="useSystem.getSystemConfigEvent()" plain :icon="WorldDownload">同步服务器</el-button>
                </div>
                <!-- 第二个配置项 -->
                <div class="flex flex-wrap items-center gap-2 mb-8">
                    <!-- 第一项配置 -->
                    <div class="flex flex-wrap items-center gap-2">
                        <!-- 点 指示图标 -->
                        <el-icon class="el-icon--left">
                            <ConditionPoint />
                        </el-icon>
                        <!-- 新增公司名称 -->
                        <div class="flex items-center mr-4 w-full">
                            <div style="width: 120px">代加工公司配置：</div>
                            <el-input class="input-style" v-model="OEMCompanyName" placeholder="请输入公司名称" clearable />
                            <el-input class="input-style" v-model="OEMCompanyAddress" placeholder="请输入公司地址" clearable />
                            <el-input class="input-style" v-model="OEMContacts" placeholder="请输入公司联系人" clearable />
                            <el-input class="input-style" v-model="OEMCompanyTel" placeholder="请输入公司联系方式" clearable />
                            <el-button type="primary" @click="updateSystemOEMPrintConfigEvent" :icon="AddSquareMultiple16Regular">确认添加</el-button>
                        </div>
                        <!-- 展示公司名称列表 -->
                        <div class="flex items-center mr-4 w-full">
                            <div style="width: 120px">已有代加工项：</div>
                            <el-dropdown placement="bottom-start">
                                <el-button :icon="HandFinger"> 列表 * {{ useSystem.print.OEMprint.length }} </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item v-if="useSystem.print.OEMprint.length === 0">
                                            没有数据，请先添加或重新拉取数据
                                        </el-dropdown-item>
                                        <el-dropdown-item
                                            v-if="useSystem.print.OEMprint.length !== 0"
                                            v-for="(item, index) in useSystem.print.OEMprint"
                                            :key="index"
                                        >
                                            <div class="flex items-center">
                                                <el-text type="primary" tag="b">{{
                                                    index +
                                                    1 +
                                                    '. ' +
                                                    item.companyName +
                                                    ' ' +
                                                    item.companyAddress +
                                                    ' ' +
                                                    item.contacts +
                                                    ' ' +
                                                    item.companyTel
                                                }}</el-text>
                                                <el-button class="ml-2" type="danger" @click="deleteSystemPrintConfigEvent(index)">删除</el-button>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script setup lang="ts">
import { Print20Regular, BookQuestionMark20Regular, AddSquareMultiple16Regular, SaveArrowRight20Regular } from '@vicons/fluent';
import { ProtocolHandler24Regular, Eye20Regular } from '@vicons/fluent';
import { ConditionPoint } from '@vicons/carbon';
import { Point, HandFinger, WorldDownload } from '@vicons/tabler';
import { useSystemStore } from '@/store/modules/system';
import { deleteSystemPrintConfig, deleteSystemPurchaseConfig, updateSystemPrintConfig, updateSystemPurchaseConfig } from '@/api/system';
import { usePermissionStore } from '@/store/modules/permission';

onMounted(async () => {
    // 获取系统配置
    await useSystem.getSystemConfigEvent();
});

/* ***********************************通用属性/方法*********************************** */
// 系统配置store
const useSystem = useSystemStore();
// 权限配置store
const usePermission = usePermissionStore();

/* ***********************************折叠面板属性/方法*********************************** */
// 默认展开面板的 name
const activeNames = ref(['print', 'purchase']);

/* ***********************************显示配置属性/方法*********************************** */
const toggleToolsRouterEvent = (val: boolean | string | number) => {

    if (val) {
        // 如果已经存在tools路由，直接返回
        if (usePermission.sidebarRouters.some((item) => item.name === 'tools')) {
            return;
        }
        // 加载工具路由
        useSystem.temp.router.forEach((item) => {
            if (item.name === 'tools') {
                usePermission.addRoutes(item);
            }
        });
        // 删除自己
        const index = useSystem.temp.router.findIndex((item) => item.name === 'tools');
        useSystem.temp.router.splice(index, 1);
    } else {
        // 缓存工具路由
        const toolsRoute = usePermission.sidebarRouters.find((item) => item.name === 'tools');
        useSystem.temp.router.push(toolsRoute);
        // 删除工具路由
        usePermission.removeRoutes('tools');
    }
};

/* ***********************************采购配置属性/方法*********************************** */
// 新增供应商配送地址
const deliveryAddress = ref('');
// 更新系统采购配置
const updateSystemPurchaseConfigEvent = () => {
    updateSystemPurchaseConfig('deliveryAddress', deliveryAddress.value).then((res) => {
        ElMessage.success(res.message);
        // 更新完毕重新拉取
        useSystem.getSystemConfigEvent();
    });
};
// 删除系统采购配置
const deleteSystemPurchaseConfigEvent = (index: number) => {
    deleteSystemPurchaseConfig('deliveryAddress', index).then((res) => {
        ElMessage.success(res.message);
        // 更新完毕重新拉取
        useSystem.getSystemConfigEvent();
    });
};

/* ***********************************打印配置属性/方法*********************************** */
// 公司名称
const OWNCompanyName = ref(useSystem.print.OWNprint.companyName || '');
// 公司地址
const OWNCompanyAddress = ref(useSystem.print.OWNprint.companyAddress || '');
// 公司联系人
const OWNContacts = ref(useSystem.print.OWNprint.contacts || '');
// 公司联系方式
const OWNCompanyTel = ref(useSystem.print.OWNprint.companyTel || '');
// 新增本系统打印配置
const updateSystemOWNPrintConfigEvent = () => {
    updateSystemPrintConfig('OWN', {
        companyName: OWNCompanyName.value,
        companyAddress: OWNCompanyAddress.value,
        contacts: OWNContacts.value,
        companyTel: OWNCompanyTel.value,
    }).then((res) => {
        ElMessage.success(res.message);
        useSystem.getSystemConfigEvent();
    });
};

/* ***********************************代加工打印配置属性/方法*********************************** */
// 新增公司名称
const OEMCompanyName = ref('');
// 新增公司地址
const OEMCompanyAddress = ref('');
// 新增公司联系人
const OEMContacts = ref('');
// 新增公司联系方式
const OEMCompanyTel = ref('');

// 新增代加工公司打印配置
const updateSystemOEMPrintConfigEvent = () => {
    updateSystemPrintConfig('OEM', {
        companyName: OEMCompanyName.value,
        companyAddress: OEMCompanyAddress.value,
        contacts: OEMContacts.value,
        companyTel: OEMCompanyTel.value,
    }).then((res) => {
        ElMessage.success(res.message);
        useSystem.getSystemConfigEvent();
    });
};
// 删除代加工打印配置
const deleteSystemPrintConfigEvent = (index: number) => {
    deleteSystemPrintConfig('OEMprint', index).then((res) => {
        ElMessage.success(res.message);
        useSystem.getSystemConfigEvent();
    });
};
</script>

<style scoped lang="scss">
.input-style {
    width: 180px;
    margin-right: 20px;
    &:nth-child(2) {
        width: 300px;
    }
    &:nth-child(3) {
        width: 500px;
    }
}
</style>
